// 创建store对象
//引入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'
// 把vuex当做插件使用
Vue.use(Vuex)

// 创建store并导出
const store = new Vuex.Store({
  state: {
    todos: JSON.parse(localStorage.getItem('todos')) || [],
    editId: undefined,
  },
  getters: {
    allTotal(state) {
      return state.todos.length
    },
    doneTotal(state) {
      return state.todos.filter((item) => item.isDone).length
    },
  },
  actions: {
    addAC({ commit }, e) {
      const todoName = e.target.value.trim()
      if (!todoName) return

      commit('addTodo', todoName)
      e.target.value = ''
    },

    delAC({ commit }, id) {
      if (confirm('确定要删除吗?')) {
        commit('delTodo', id)
      }
    },
    clearDoneAc({ commit }) {
      if (confirm('确定要删除所有完成任务吗?')) {
        commit('clearAllDone')
      }
    },
    setTodoName({ commit }, { inputValue, id }) {
      if (!inputValue) return

      commit('editTodoName', { inputValue, id })
    },
  },
  mutations: {
    addTodo(state, todoName) {
      // 根据任务名,创建任务对象
      const { todos } = state
      const todo = {
        id: todos.length ? todos[todos.length - 1].id + 1 : 1,
        todoName,
        isDone: false,
      }
      todos.push(todo)
    },

    updateTodo(state, id) {
      state.todos.forEach((item) => {
        if (item.id === id) {
          item.isDone = !item.isDone
        }
      })
    },

    delTodo(state, id) {
      state.todos = state.todos.filter((item) => item.id !== id)
    },

    checkAllTodo(state, target) {
      state.todos.forEach((item) => {
        item.isDone = target
      })
    },

    clearAllDone(state) {
      state.todos = state.todos.filter((item) => !item.isDone)
    },

    setEditId(state, id) {
      state.editId = id
    },
    editTodoName(state, { inputValue, id }) {
      state.todos.forEach((item) => {
        if (item.id === id) {
          item.todoName = inputValue
        }
      })
      // 修改editId,让编辑文本框消失
      state.editId = undefined
    },
  },
})

// 注意: watch方法监听的是,第一个函数的返回值
// 这里我们监听的是数据是否变化
// store.watch(
//   (state, getters) => {
//     return state.todos
//   },
//   (newTodos, oldTodo) => {
//     // 当第一个函数的返回值发生变化,则这个函数会触发
//     // console.log('todos的值被修改了', args)
//     localStorage.setItem('todos', JSON.stringify(newTodos))
//   },
//   {
//     deep: true, // 深度监听
//   }
// )

// 监听的是mutation中是否有函数执行
store.subscribe((mutation, state) => {
  // console.log(mutation)
  // console.log(state)
  localStorage.setItem('todos', JSON.stringify(state.todos))
})
export default store
